<!DOCTYPE html>
<html>
	<head>
		<!--
        	作者：leryo@163.com
        	时间：2018-06-11
        	描述：这个html是为了练习css3的2d和3d变化做的
        	transform 的 方法: rotate,translate,scale,skew,matrix
        	及3d的方法 rotateX(),rotateY()
        	
        	其中存在问题的是matrix的矩阵变换,这里有六个参数需要按照线性代数中的矩阵计算
        	
        -->
		<meta charset="UTF-8">
		<title>CSS3练习</title>
		<style type="text/css">
			body{
				margin: 20px 200px;
			}
			/*div{
				border: 1px  solid #00FFFF;
				height: 300px;
				padding: 30px;
				
			}*/
			.imgtr:hover{
				/*rotate顺时针旋转20度*/
				transform:rotate(20deg);
				-ms-transform: rotate(20deg);
				-webkit-transform: rotate(20deg);
				/*translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。*/
				transform: translate(30px,100px);
				-ms-transform: translate(30px,100px);
				-webkit-transform: translate(30px,100px);
				/*scale(x,y)x轴放大x倍,y轴放大y倍*/
				transform: scale(0.3,3);
				-ms-transform:scale(0.3,3) ;
				-webkit-transform: scale(0.3,3);
				/*skew包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。*/
				transform: skew(-10deg,30deg);
				-ms-transform: skew(-10deg,30deg);
				-webkit-transform: skew(-10deg,30deg);
				/*
				 *matrix()方法和2D变换方法合并成一个。
				 *matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
				 * matrix(,,,,平移x,平移y)
				 */
				/*3d的x轴翻转*/
				transform: rotateX(180deg);
    			-webkit-transform: rotateX(180deg);
    			/*3d的y轴翻转*/
    			transform: rotateY(120deg);
    			-webkit-transform: rotateY(120deg); 
    			/*鼠标如果停留在在原图位置,会出现闪烁,应该让它变换一次或者几次之后就停止*/
    			
    			transform: rotateY(60deg);
    			transform-style: preserve-3d;
    			-webkit-transform: rotateY(60deg); /* Safari and Chrome */
    			-webkit-transform-style: preserve-3d; /* Safari and Chrome */
    			
    			/*transform: rotateZ(120deg);
    			-webkit-transform: rotateZ(120deg);*/
			}
		</style>
	</head>
	<body>
		<div id="img1">
			<img src="img/magz.jpg" alt="img" />
			<div id="img2" class="imgtr">
			<img src="img/magz.jpg" alt="img" />
			<div id="img3" >
			<img src="img/magz.jpg" alt="img" />
		</div>
		</div>
		
	</body>
</html>
